<template>
  <div class="loading-component-icon" id="loading-icon" ref="loadingRef">
    <div class="loading-box">
      <div id="loading"></div>
    </div>
    <h1>下拉刷新 ↓</h1>
    <div v-for="item in 26" :key="item">
      <span>{{ item }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import { getTestList } from '@/api/home'

import { useGlobalLoading } from '@/hooks'

const { touchStart, elMove, elCancel, initElMount } = useGlobalLoading()

const loadingRef = ref()

onMounted(() => {
  initElMount(loadingRef.value)
  loadingRef.value?.addEventListener('touchstart', touchStart, false)
  loadingRef.value?.addEventListener(
    'touchmove',
    (e: TouchEvent) => elMove(e),
    false
  )
  loadingRef.value?.addEventListener(
    'touchend',
    () => {
      elCancel(getTestList).then((res) => {
        console.log(res, ' res---')
      })
    },
    false
  )
})
</script>

<style scoped lang="scss">
.loading-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: -80px;
  height: 60px;
  #loading {
    width: 25px;
    height: 25px;
    border: 3px solid #ddd;
    border-radius: 50%;
    border-bottom: 3px solid #717171;
    transform: rotate(0deg);
    animation: loading 1s linear infinite;
  }

  @keyframes loading {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}

.loading-component-icon {
  background-color: #717171;
  min-height: 100vh;
}
</style>
